<template>
	<!-- 收银台页面 -->
	<view class="content">
		<view class="checkbox_order">
			<!-- 支付方式 -->
			<text class="checkbox_order_price">￥149.70</text>
			<van-radio-group :value="radio" @change="onChange">
			  <van-cell-group>
			    <van-cell title="支付宝" clickable data-name="1" @click="onClick">
					<image style="width: 34rpx;" mode="widthFix" slot="icon" src="http://localhost:3000/img/zzhifu.png" />
			      <van-radio icon-class="icon-class" custom-class="custom-classpay" checked-color="#EB2836"  slot="right-icon" name="1">
				  </van-radio>
			    </van-cell>
			    <van-cell title="微信" clickable data-name="2" @click="onClick">
					<image style="width: 34rpx;" mode="widthFix" slot="icon" src="http://localhost:3000/img/wzhifu.png" />
			      <van-radio icon-class="icon-class" custom-class="custom-classpay" checked-color="#EB2836"  slot="right-icon" name="2">
				  </van-radio>
			    </van-cell>
			  </van-cell-group>
			</van-radio-group>
			<!-- 支付按钮 -->
			<button @click="paysuccess" type="warn" style="margin-top: 100rpx;margin-bottom: 100rpx;font-size: 30rpx;">支付宝支付149.7</button>
		</view>
		<!-- 合计区域 -->
		<van-submit-bar
		  :price="price"
		  button-text="提交订单"
		  @submit="onSubmit"
		  custom-class="custom-class"
		>
			<text style="color: #999;">共3件，</text>
		</van-submit-bar>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				radio:'1',
				price:120,
			}
		},
		methods:{
			// 支付方式改变
			onChange(val){
				console.log(val)
				this.radio=val.detail
			},
			onClick(val){
				console.log(val,"a")
			},
			// 提交按钮
			onSubmit(val){
				console.log(val)
			},
			// 点击支付按钮
			paysuccess(){
				uni.navigateTo({
					url:"./paysuccess"
				})
			}
		}
	}
</script>

<style>
	.checkbox_order{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.checkbox_order_price{
		display:flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #EF3646;
		font-weight: 900;
		padding: 30rpx 0;
	}
	.custom-classpay{
		padding:20rpx!important;
	}
	.van-cell{
		display: flex!important;
		align-items: center!important;
		font-weight: 700!important;
		font-size: 24rpx!important;
	}
	image{
		border-radius: 10rpx!important;
		margin-right: 14rpx!important;
	}
	.icon-class{
		font-size: 28rpx!important;
	}
	.van-radio__icon{
		width: 34rpx!important;
		height: 34rpx!important;
	}
	
	/* 底部根节点样式类 */
	.custom-class{
		width: 750rpx;
		height: 96rpx;
		border-top:2rpx solid #f3f3f3 ;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-weight: 900;
		font-size: 24rpx!important;
	}
	.van-submit-bar__bar,.van-submit-bar__price,.van-submit-bar__currency,.van-submit-bar__price-integer{
		font-size: 24rpx!important;
	}
	..van-button__text{
		font-size: 26rpx!important;
	}
	.van-submit-bar__button,.van-button,.van-button--danger,.van-button--normal,.van-button--round{
		width:192rpx!important;
		height: 68rpx!important;
		font-size: 26rpx!important;
	}
</style>
